<template>
  <div>
    <van-nav-bar
      title="标题"
      left-text="返回"
      left-arrow
      @click-right="personalFn"
    >
      <template #left>
        <span class="iconfont iconnew"></span>
      </template>
      <template #title>
        <div class="search" @click="serchFn">
          <van-icon name="search" />搜索新闻
        </div>
      </template>
      <template #right>
        <van-icon name="manager-o" size="25" />
      </template>
    </van-nav-bar>
    <van-tabs @click.native="categoryFn" v-model="curIndex" @change="tabUpdate">
      <van-tab v-for="(item, index) in list" :key="index" :title="item.name">
        <van-pull-refresh
          v-model="isLoading"
          success-text="刷新成功"
          @refresh="onRefresh"
        >
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            :immediate-check="false"
          >
            <allSingle
              v-for="(items, ind) in newList"
              :key="ind"
              :post="items"
              @click.native="newsDetailsFn(items.id)"
            ></allSingle>
          </van-list>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import allSingle from "@/components/allSingle";
import { articleList } from "@/apis/get.js";
import { category } from "@/apis/get";
export default {
  data() {
    return {
      list: {},
      newList: [],
      isLoading: false,
      curIndex: this.$route.meta.curIndex,
      loading: false,
      finished: false,
      pageIndex: 1,
      pageSize: 10,
    };
  },
  async created() {
    // category().then((res) => {
    //   // console.log(res);
    //   this.list = res.data.data;
    // });
    if (localStorage.getItem("categoryList")) {
      let categoryList = JSON.parse(localStorage.getItem("categoryList"));
      let defaultCategoryList = JSON.parse(
        localStorage.getItem("defaultCategoryList")
      );
      this.list = [...defaultCategoryList, ...categoryList];
    } else {
      let res = await category();
      this.list = res.data.data;
    }

    this.getNewList();
    // articleList({
    //   category: this.list[this.curIndex].id,
    // }).then((res) => {
    //   // console.log(51, this.list);
    //   // console.log(res);
    //   this.newList = res.data.data;
    //   // console.log(54, this.newList);
    // });
  },
  components: {
    // single,
    allSingle,
  },
  //切换栏目
  methods: {
    tabUpdate(name, title) {
      this.curIndex = name;
      this.newList = [];
      this.pageIndex = 1;
      this.finished = false;
      this.$route.meta.curIndex = name;
      this.getNewList();
    },
    //获取新的文章
    getNewList() {
      articleList({
        category: this.list[this.curIndex].id,
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
      }).then((res) => {
        this.isLoading = false;
        this.loading = false;
        if (res.data.data.length < this.pageSize) {
          // console.log(100);
          this.finished = true;
          // this.$toast("没有更多了");
        }
        this.newList = [...this.newList, ...res.data.data];
      });
    },
    // 下拉刷新
    onRefresh() {
      this.newList = [];
      this.pageIndex = 1;
      this.finished = false;
      this.getNewList();
    },
    // 上拉加载更多
    onLoad() {
      // console.log(112);
      this.pageIndex++;
      this.getNewList();
    },
    // 跳转新闻详情
    newsDetailsFn(val) {
      // console.log(val);
      this.$router.push({
        path: "newsDetails",
        query: {
          id: val,
        },
      });
    },
    // 返回个人中心
    personalFn() {
      this.$router.push({
        path: "personal",
      });
    },
    // 加号跳转栏目分类
    categoryFn(e) {
      // console.log(150, e);
      if (e.target.className.indexOf("van-tabs--line") != -1) {
        this.$router.push({
          path: "category",
        });
      }
    },
    // 跳转到搜索页
    serchFn() {
      this.$router.push({
        path: "search",
      });
    },
  },
};
</script>

<style lang="less" scoped>
.van-nav-bar {
  background-color: #ff0000;
  span {
    font-size: 60px;
    color: #fff;
  }
  .search {
    display: black;
    width: 250px;
    height: 30px;
    line-height: 30px;
    color: #fff;
    background-color: rgba(255, 255, 255, 0.6);
    text-align: center;
    border-radius: 20px;
  }
  .van-icon {
    color: #fff;
  }
}
.van-tabs {
  /deep/.van-tabs__nav {
    padding-right: 52px;
  }
  &::after {
    content: "+";
    background-color: #fff;
    font-size: 30px;
    position: absolute;
    top: 0px;
    right: 0px;
    width: 45px;
    height: 45px;
    line-height: 45px;
  }
}
</style>